import { Form, Input, Button } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { userLogin } from "@/api/commonApi.js"
import Cookies from "js-cookie";

import "./login.less"

const Login = (props) => {
  const onFinish = (values) => {
    userLogin(values)
    .then((response) => {
      let res = response.data.data;
      if (response.data.code === 200) {
        let user = res;
        Cookies.set("token", res.token, { expires: 365 });
        Cookies.set("user", user, { expires: 365 });
        props.history.push({
          pathname: '/tabledemo'
        });
      }
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className="container">
      <div className="left">
        <div className="logo" />
      </div>
      <div className="right">
        <div className="loginContent">
          <div className="loginLog" />
          <div className="loginText">
            <div className="txt1">Hello!</div>
            <div className="txt2">Welcome to Humboldt Technology!</div>
            <div className="form">
              <Form size="large" name="basic" initialValues={{ mobile: 15239420304, spass: 123456 }} onFinish={onFinish} onFinishFailed={onFinishFailed}>
                <Form.Item name="mobile" rules={[{ required: true, message: '请输入邮箱 / 手机号' }]}>
                  <Input prefix={<UserOutlined />}/>
                </Form.Item>
                <Form.Item name="spass" rules={[{ required: true, message: '请输入密码' }]}>
                  <Input.Password />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" block htmlType="submit">登陆</Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
export default Login;